<template>
	<view class="favoritesEdit">
		<view class="TopNav">
			<view class="back">
				<view class="back-icon">
					<uni-icons type="closeempty" size="40rpx" color="#767676" @click="back()"></uni-icons>
				</view>
				<view class="title">编辑收藏夹</view>
			</view>
			<view class="all-check" @click="submit">完成</view>
		</view>

		<view class="form">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top">
				<uni-forms-item label="名称" name="name">
					<!-- <input class="input" type="text" v-model="formData.name" name="name" placeholder="添加标题" /> -->
					<uni-easyinput
						class="input"
						type="text"
						autoHeight
						v-model="formData.name"
						:clearable="false"
						:inputBorder="false"
						placeholder="添加标题"
					/>
				</uni-forms-item>
				<uni-forms-item label="操作">
					<view class="del" @click="$refs.diglog.open()">
						<view class="del-title">删除</view>
						<view class="del-content">永久删除此收藏夹及其中所有图片。你将无法撤销此操作</view>
					</view>
				</uni-forms-item>
			</uni-forms>

			<!-- <form @submit="formSubmit" @reset="formReset">
				<view class="form-item">
					<view class="title">姓名</view>
					<input class="input" type="text" v-model="formData.name" name="name" placeholder="请输入姓名" />
				</view>
				<view class="form-item">
					<view class="title">操作</view>
					<view class="del">
						<view class="del-title">删除</view>
						<view class="del-content">永久删除此收藏夹及其中所有图片。你将无法撤销此操作</view>
					</view>
				</view>
			</form>
			<button form-type="submit">Submit</button> -->
		</view>

		<view><Dialog ref="diglog" type="bottom" @confirm="delFolder" /></view>
	</view>
</template>

<script>
import api from '@/common/api.js';
import Dialog from '@/components/Dialog/Dialog.vue';
export default {
	components: {
		Dialog
	},
	data() {
		return {
			// 表单数据
			formData: {
				name: ''
			},
			rules: {
				// 对name字段进行必填验证
				name: {
					rules: [
						{
							required: true,
							minLength: 1,
							errorMessage: "请输入有效的收藏夹名称, 收藏夹名称需至少一个字母、数字或以下字符之一('-_-+')"
						}
					]
				}
			},

			folderId: '' // 收藏夹id
		};
	},
	onLoad(option) {
		this.folderId = option.fId;
		this.formData.name = option.fName;
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			});
		},

		// 触发提交表单
		async submit() {
			let isPass = await this.validateForm();
			if (!isPass) {
				return false;
			}

			// 判断token字符串是否存在
			let tokenString = uni.getStorageSync('access_token');
			if (!tokenString) {
				console.log('token不存在');
				return uni.showToast({
					title: '请登录',
					duration: 1000,
					icon: 'error',
					complete() {
						setTimeout(() => {
							uni.navigateTo({
								url: '../loginWays/loginWays'
							});
						}, 1000);
					}
				});
			}

			try {
				let res = await this.$ajax.put({
					url: api.editFolder,
					data: {
						id: this.folderId,
						name: this.formData.name
					},
					header: {
						Authorization: 'Bearer ' + tokenString
					}
				});
				// console.log('编辑成功 ==>', res);
				if (res.statusCode == 200) {
					uni.navigateBack({
						delta: 1,
						complete: () => {
							setTimeout(() => {
								uni.$emit('editFolder', { name: this.formData.name });
							}, 500);
						}
					});
				}
			} catch (e) {
				console.log(e);
			}
		},

		// 表单验证的方法
		validateForm() {
			return new Promise((resolve, reject) => {
				this.$refs.form
					.validate()
					.then(res => {
						resolve(true);
					})
					.catch(err => {
						resolve(false);
					});
			});
		},

		async delFolder() {
			// 判断token字符串是否存在
			let tokenString = uni.getStorageSync('access_token');
			if (!tokenString) {
				console.log('token不存在');
				return uni.showToast({
					title: '请登录',
					duration: 1000,
					icon: 'error',
					complete() {
						setTimeout(() => {
							uni.navigateTo({
								url: '../loginWays/loginWays'
							});
						}, 1000);
					}
				});
			}
			try {
				let res = await this.$ajax.delete({
					url: api.delFolder,
					data: {
						ids: [this.folderId]
					},
					header: {
						Authorization: 'Bearer ' + tokenString
					}
				});
				// console.log('delres ==>', res);
				if (res.statusCode == 200) {
					uni.reLaunch({
						url: '../mine/mine?id=' + this.folderId,
						success: () => {
							uni.showToast({
								title: `${this.formData.name} 收藏夹已删除`,
								icon: 'none'
							});
						}
					});
				}
			} catch (e) {
				console.log(e);
			}
		}
	}
};
</script>

<style lang="scss">
$font-color: #111;
.favoritesEdit {
	.TopNav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// height: 80rpx;
		padding: 16rpx 32rpx;
		background-color: #fff;
		.back {
			display: flex;
			justify-content: center;
			align-items: center;
			// width: 40rpx;
			// height: 40rpx;
		}
		.back-icon {
			font-weight: 700;
			padding-top: 10rpx;
		}
		.title {
			font-size: 34rpx;
			font-weight: 700;
			color: #111;
			margin-left: 20rpx;
			letter-spacing: 2rpx;
		}
		.all-check {
			// width: 100rpx;
			height: 90;
			border-radius: 44rpx;
			background-color: #e60023;
			color: #fff;
			font-size: 32rpx;
			letter-spacing: 2rpx;
			text-align: center;
			line-height: 90rpx;
			padding: 0 24rpx;
		}
	}
	.form {
		padding: 32rpx;
		.form-item {
			margin-bottom: 40rpx;
		}
		.title {
			margin-bottom: 20rpx;
		}
		.input {
			font-size: 40rpx;
			padding: 0;
		}
	}
	.del-title {
		font-size: 40rpx;
		margin-bottom: 10rpx;
	}
	.del-content {
		color: #767676;
	}
	/deep/ .uni-forms-item__content {
		min-height: 0;
	}
	/deep/ .uni-forms-item__label .label-text {
		font-size: 32rpx;
		color: #111;
	}
	.uni-easyinput__content-input {
		font-size: 40rpx !important;
		padding: 0 !important;
	}
	.uni-easyinput__content {
		min-height: 0 !important;
	}
	/deep/.uni-error-message {
		position: relative;
		bottom: 20px;
	}
}
</style>
